<template>
  <div>
    <div class="list">
      <i class="el-icon-collection-tag" style="color: rgb(255, 103, 0)"></i>
      我的收藏
    </div>
    <hr />
    <!-- 数据 -->
    <div class="s1" v-if="list.length != 0">
      <div class="s3">
        <div class="card" v-for="item in list" :key="item.product_id">
          <div class="s2">
            <el-popover width="200">
              <p
                slot="reference"
                style="display: none"
                @click="deladd(item.product_id)"
              >
                x
              </p>
            </el-popover>
            <img
              @click="tiao(item.product_id)"
              :src="'http://101.132.181.9:3000/' + item.product_picture"
              alt=""
            />
          </div>
          <p>{{ item.product_name }}</p>
          <p>{{ item.product_title }}</p>
          <p style="color: red">
            {{ item.product_price }}&ensp;
            <s style="color: gray; font-size: 20px">{{
              item.product_selling_price
            }}</s>
          </p>
        </div>
      </div>
    </div>

    <div class="empy" v-show="list.length == 0">
      <p>您的收藏还是空的！</p>
      <span>快去购物吧！</span>
    </div>
  </div>
</template>

<script>
import { getloveList, deladdList } from "@/api/details";
export default {
  name: "collect",
  data() {
    return {
      userId: this.$store.state.users.user_id,
      list: [],
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    //删除收藏
    async deladd(pid) {
      let res = await deladdList({ user_id: this.userId, product_id: pid });
      console.log(res);
      if (res.code == "001") {
        this.getdata();

        this.$notify.success({
          title: "删除成功",
          message: res.msg,
          showClose: false,
        });
      }
    },
    // 跳转
    tiao(type) {
      this.$router.push({
        path: "/details",

        query: {
          type: type,
        },
      });
    },
    // 渲染
    async getdata() {
      let res = await getloveList({ user_id: this.userId });
      console.log(res);
      if (res.code == "001") {
        this.list = res.collectList;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

.card {
  width: 18%;
  background-color: #ffffff;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s linear;
  position: relative;
  &:hover.card {
    box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
    transform: translate3d(0, -2px, 0);
  }
}

.s1 {
  width: 100%;
  height: 600px;
  background-color: #f5f5f5;
  .s3 {
    width: 80%;
    margin: auto;
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-around;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    .s2 {
      width: 100%;
      height: 70%;
      &:hover p {
        display: block !important;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
    .s2:hover .el-popover p {
      display: block;
    }
  }
}
hr {
  background-color: red;
}

.list {
  width: 80%;
  height: 64px;
  margin: auto;
  height: 64px;
  line-height: 58px;
  font-size: 28px;
}
.empy {
  height: 300px;
  padding: 0 0 130px 558px;
  margin: 65px 0 0;
  background: url(http://101.132.181.9/img/cart-empty.8b316431.png) no-repeat
    124px 0;
  color: #b0b0b0;
  overflow: hidden;
  p {
    margin: 70px 0 15px;
    font-size: 36px;
  }
  span {
    margin: 0 0 20px;
    font-size: 20px;
  }
}
</style>